<template>
  <div class="trajectory" id="index">
    <!-- 附近历史轨迹 -->
  </div>
</template>

<script type="text/javascript">
import axios from "@/utils/axios";
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
    var map = new AMap.Map("index", {
      mapStyle: "amap://styles/1401cb82ab59c386be2872d18a1f7271",
      features: ["bg", "road", "point"],
      center: [116.40866, 39.87596],
      zoom: 11,
      pitch: 50,
      rotation: 45,
      viewMode: "3D"
    });

    var layer = new Loca.LinkLayer({
      map: map,
      fitView: false
    });

    $.get("//a.amap.com/Loca/static/mock/home_comp_line.json", function(
      home_comp_line
    ) {
      layer.setData(home_comp_line.slice(0, 500), {
        lnglat: "lnglat"
      });

      layer.setOptions({
        blendMode: "lighter",
        style: {
          // 曲率 [-1, 1] 区间
          curveness: function(data) {
            if (data.value.dis < 100) {
              return 0.07;
            } else if (data.value.dis < 300) {
              return 0.05;
            } else if (data.value.dis < 500) {
              return 0.02;
            } else if (data.value.dis < 700) {
              return 0.01;
            } else {
              return 0.005;
            }
          },
          opacity: 0.8,
          color: "#FF00FF"
          // color: "#5DFBF9"
        }
      });

      layer.render();
    });
  },
  methods: {}
};
</script>
<style  scoped>
.trajectory {
  height: calc(100vh - 50px);
  background-color: #23262f;
}
</style>